<template>
  <div>
    <div class="canvas" style="opacity: .2">
      <iframe frameborder="0" :src="iframeSrc" style="width: 100%; height: 100%"></iframe>
    </div>
    <div v-if="isLoading" class="loading">
      <div class="loadbox"><img src="../assets/picture/loading.gif"> 页面加载中...</div>
    </div>
    <div class="head">
      <h1>故障诊断平台</h1>
      <div class="weather"><img src="../assets/picture/weather.png"><span>{{ weatherInfo }}</span><span>{{
          currentTime
        }}</span>
      </div>
    </div>
    <div class="mainbox">
      <ul class="clearfix">
        <li>
          <div class="boxall" style="height: 3.2rem">
            <div class="alltitle">模型选择</div>
            <div class="form-group">
              <select v-model="selectedModel">
                <option v-for="model in models" :key="model" :value="model">{{ model }}</option>
              </select>
            </div>
          </div>
          <div class="boxall" style="height: 3.2rem">
            <div class="alltitle">模块标题样式</div>
            <div id="myMiddleChart" :style="{width: '300px',height: '300px'}"></div>
          </div>
          <div class="boxall" style="height: 3.2rem">
            <div style="height:100%; width: 100%;">
              <div class="sy" ref="fb1"></div>
              <div class="sy" ref="fb2"></div>
              <div class="sy" ref="fb3"></div>
            </div>
            <div class="boxfoot">
            </div>
          </div>
        </li>
        <li>
          <div class="bar">
            <div class="barbox">
              <ul class="clearfix">
                <li class="pulll_left counter"><input type="file" @change="onTrainDataSelected" id="train-data"></li>
                <li class="pulll_left counter"><input type="file" @change="onTestDataSelected" id="test-data"></li>
              </ul>
            </div>
            <div class="barbox2">
              <ul class="clearfix">
                <li class="pulll_left"><label for="train-data">上传测试数据</label></li>
                <li class="pulll_left"><label for="test-data">上传训练数据</label></li>
              </ul>
            </div>
            <div class="barbox">
              <ul class="clearfix">
                <li class="pulll_left counter">
                  <button @click="onTrainButtonClick" id="train-data-button">开始训练</button>
                </li>
                <li class="pulll_left counter">
                  <button @click="onTestButtonClick" id="test-data-button">开始测试</button>
                </li>
              </ul>
            </div>
            <div class="barbox2">
              <ul class="clearfix">
                <li class="pulll_left"><label for="train-data-button">开始训练</label></li>
                <li class="pulll_left"><label for="test-data-button">开始测试</label></li>
              </ul>
            </div>
            <div class="barbox">
              <ul class="clearfix">
                <li class="pulll_left counter">
                  <button @click="onDownloadModelButtonClick" id="train-data-buttons">下载模型</button>
                </li>
                <li class="pulll_left counter">
                  <button @click="onDownloadClassificationResultButtonClick" id="test-data-buttons">下载分类结果
                  </button>
                </li>
              </ul>
            </div>
            <div class="barbox2">
              <ul class="clearfix">
                <li class="pulll_left"><label for="train-data-buttons">下载模型</label></li>
                <li class="pulll_left"><label for="test-data-buttons">下载分类结果</label></li>
              </ul>
            </div>
          </div>
          <div class="map">
            <div class="map1"><img src="../assets/picture/lbx.png"></div>
            <div class="map2"><img src="../assets/picture/jt.png"></div>
            <div class="map3"><img src="../assets/picture/map.png"></div>
            <div class="map4" ref="map_1"></div>
          </div>
        </li>
        <li>
          <div class="boxall" style="height:3.4rem">
            <div class="alltitle">模块标题样式</div>
            <demo/>
          </div>
          <div class="boxall" style="height: 3.2rem">
            <div class="alltitle">模块标题样式</div>
            <div class="allnav" ref="echart5"></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 3rem">
            <div class="alltitle">模块标题样式</div>
            <div class="allnav" ref="echart6"></div>
            <div class="boxfoot"></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="back"></div>
  </div>
</template>

<script>
import $ from '../assets/js/jquery'
import demo from "@/views/demo";

export default {
  components: {
    demo,
  },
  data() {
    return {
      iframeSrc: '../assets/js/index.html',
      isLoading: true,
      weatherInfo: '',
      currentTime: '',
      models: ['模型1', '模型2', '模型3'],
      selectedModel: '',
      trainData: null,
      testData: null,
    };
  }
  ,
  mounted() {
    $(window).load(() => {
      $('.loading').fadeOut()
    })
    const whei = $(window).width()
    $('html').css({fontSize: `${whei / 20}px`})
    $(window).resize(() => {
      const whei = $(window).width()
      $('html').css({fontSize: `${whei / 20}px`})
    })
    const t = setInterval(() => {
      this.currentTime = this.getFormattedCurrentTime()
    }, 1000)
    this.fetchWeatherInfo().then(info => {
      clearInterval(t)
      this.weatherInfo = info
      this.currentTime = this.getFormattedCurrentTime()
      this.isLoading = false
    }).catch(() => {
      clearInterval(t)
      this.currentTime = this.getFormattedCurrentTime()
      this.isLoading = false
    })
    this.drawMiddleChart()
  }
  ,
  methods: {

    getFormattedCurrentTime() {
      const date = new Date()
      const y = date.getFullYear()
      const mt = date.getMonth() + 1
      const day = date.getDate()
      const h = date.getHours()
      const m = date.getMinutes()
      const s = date.getSeconds()
      return `${y}年${mt}月${day}日 ${h}时${m}分${s}秒`
    }
    ,
    fetchWeatherInfo() {
// return a Promise that resolves to some string
    }
    ,
    onTrainDataSelected(event) {
      this.trainData = event.target.files[0]
    }
    ,
    onTestDataSelected(event) {
      this.testData = event.target.files[0]
    }
    ,
    onTrainButtonClick() {
// perform some actions when the train button is clicked
    }
    ,
    onTestButtonClick() {
// perform some actions when the test button is clicked
    }
    ,
    onDownloadModelButtonClick() {
// perform some actions when the download model button is clicked
    }
    ,
    onDownloadClassificationResultButtonClick() {
// perform some actions when the download classification result button is clicked
    },
    getData() {   //获取数据并赋值给middleChartExtend.series.data
    },
  }
}
</script>
<style scoped>

@import '../assets/css/comon0.css';


</style>